<template>
  <el-drawer
      :wrapperClosable="false"
      size="40%"
      title="位置选择"
      :visible.sync="showStatus"
      direction="rtl"
      width="600px">
    <el-form style="margin-left: 20px" class="searchForm" size="small" :model="searchFrom">
      <el-row :gutter="5">
        <el-col :span="10">
          <el-form-item prop="name">
            <el-input clearable placeholder="请输入搜索位置信息"
                      v-model="searchFrom.name"
                      name="name"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button icon="el-icon-search" type="primary" size="mini"
                     @click="searchAddress">搜索位置
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <div id="mapContainer" style="width:100%;height:300px;"></div>
    <el-table
        highlight-current-row
        :data="nearPointList"
        :max-height="tableHeight"
        style="width: 100%">
      <el-table-column
          prop="name"
          label="附近地点名称">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button
              @click.native.prevent="selectAddress(scope.row)"
              type="text"
              size="small">
            确认选择
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row style="margin: 10px">
      <el-input clearable placeholder="自行填写地址信息" v-model="customerAddress">
        <el-button slot="append" icon="el-icon-success" @click="customerAddressHandler">确定</el-button>
      </el-input>
    </el-row>
  </el-drawer>
</template>
<script>
import maps from 'qqmap'

export default {
  name: "index",
  data() {
    return {
      customerAddress: '',
      rootAddress: '',
      searchFrom: {name: ''},
      nearPointList: [],
      showStatus: false,
      map: '',
      data: '',
      markersArray: [],
      lat: '',
      lon: ''
    }
  },
  mounted() {
    this.initMap()
  },
  computed: {
    tableHeight() {
      return (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) - 500
    }
  },
  methods: {
    customerAddressHandler() {
      if (!this.lat || !this.lon) {
        this.$message.warning("请在地图上选择点")
      }
      if (!this.customerAddress) {
        this.$message.warning("请填写地址")
      }
      this.$emit("on-select", this.rootAddress, this.customerAddress, this.lat, this.lon)
      this.showStatus = false
    },
    searchAddress() {
      if (!this.searchFrom.name) {
        this.$message.error('未输入搜索内容')
        return
      }
      this.setLocationByAddress(this.rootAddress + ',' + this.searchFrom.name)
    },
    initMap() {
      let that = this
      maps.init('4TWBZ-2XDO4-G27U2-D5MK4-GS5F6-Y2F5H', () => {
        let latLon = new qq.maps.LatLng(26.326248944008693, 116.35539315640926)
        let myOpts = {
          zoom: 14,
          center: latLon,
          mapTypeId: qq.maps.MapTypeId.ROADMAP
        }
        that.map = new qq.maps.Map(
            document.getElementById('mapContainer'),
            myOpts
        )
        qq.maps.event.addListener(that.map, 'click', function (event) {
          that.setLocationByLatLng(event.latLng.getLat(), event.latLng.getLng())
        })
      })
      //  绑定单击事件添加参数

      //  调用经纬度解析类
      that.geocoder = new qq.maps.Geocoder({
        complete: function (result) {
          that.nearPointList = result.detail.nearPois
          that.map.setCenter(result.detail.location);
          let marker = new qq.maps.Marker({
            map: that.map,
            position: result.detail.location
          });
          that.markersArray.push(marker);
          if (that.markersArray.length > 1) {
            for (let i = 0; i < that.markersArray.length - 1; i++) {
              that.markersArray[i].setMap(null);//  清除标记
            }
          }
        }
      });
      that.geocoderLocation = new qq.maps.Geocoder({
        complete: function (result) {
          //  查找附近的点
          let latLng = new qq.maps.LatLng(result.detail.location.lat, result.detail.location.lng);
          that.geocoder.getAddress(latLng);
        }
      });
    },
    selectAddress(row) {
      this.$emit("on-select", this.rootAddress, row.name, row.latLng.lat, row.latLng.lng)
      this.showStatus = false
    },
    show() {
      this.initMap()
      this.showStatus = true
    },
    setLocationByAddress(address) {
      this.rootAddress = address
      this.geocoderLocation.getLocation(address);
    },
    setLocationByLatLng(lat, lng) {
      this.lat = lat
      this.lon = lng
      let latLng = new qq.maps.LatLng(lat, lng);
      this.geocoder.getAddress(latLng);
    }

  }
}
</script>

<style scoped>

</style>
